<!DOCTYPE html>
<html lang="zh" style="height: 100%">
<head>
    <meta charset="utf-8">
    <title>ECharts 使用案例</title>
    <script src="/lib/echarts.min.js" type="text/javascript"></script>
</head>
<body style="height: 100%; margin: 0">
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="chord-chart"></div>
<!--<script src="scripts.js"></script>-->

<script>
    // 创建一个基于 canvas 的 ECharts 实例
    const chart = echarts.init(document.getElementById('chord-chart'));

    // 定义节点和边的数据
    const nodes = [
        {name: 'Node 1'},
        {name: 'Node 2'},
        {name: 'Node 3'},
        // 添加更多节点...
    ];

    const links = [
        {source: 'Node 1', target: 'Node 2', value: 10},
        {source: 'Node 2', target: 'Node 3', value: 5},
        // 添加更多连接...
    ];

    // 将节点和边转换为 ECharts 所需的数据格式
    const categories = nodes.map(node => ({name: node.name}));
    const convertedLinks = links.map(link => ({
        source: link.source,
        target: link.target,
        value: link.value,
    }));

    // 设置图表的配置项
    const options = {
        tooltip: {},
        legend: {
            data: categories.map(category => category.name),
        },
        series: [
            {
                type: 'graph',
                layout: 'none',
                data: nodes,
                links: convertedLinks,
                categories: categories,
                roam: true,
                label: {
                    show: true,
                },
                lineStyle: {
                    color: 'source',
                    curveness: 0.3, // 控制边的弯曲度，可根据需求调整
                },
            },
        ],
    };

    // 使用配置项绘制图表
    chart.setOption(options);
</script>
</body>
</html>

